<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mini贪吃蛇</title>
    <style>
        #box{
            width: 1000px;
            height: 560px;
            border: 1px solid #000000;
            margin: 0px auto;
            position: relative;
        }
        .mine{
            background-color: red;
            width: 30px;
            height: 30px;
            position: absolute;
        }
        .div{
            background-color: greenyellow;
            width: 30px;
            height: 30px;
            position: absolute;
        }
        #count{
            position: fixed;
            left: 40px;
            top: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="count">0</div>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //jQuery的加载事件，页面加载时，立刻执行
        /* $(document).ready(function(){
            alert('加载事件')
        }) */

        let mine = null  //自己
        let mine_left = 0  //左边距
        let mine_top  = 0  //上边距
        let maxLeft = 0  //最大左边距
        let maxTop = 0   //最大上边距
        let position = 'top'

        let timer2=null
        let timer3=null
        //创建div
        function creatediv (){
            timer2 = setInterval(() => {
                let div = $('<div/>').addClass('div')
                $("#box").append(div)
                
                div.css({
                    top:Math.floor(Math.random()*maxTop),
                    left:Math.floor(Math.random()*maxLeft)
                })

                //5秒后，div自动移除
                timer3 = setInterval(() => {
                    div.remove()
                    clearInterval(timer3)
                }, 6000);

            }, 3000);
        }

        //判断是否碰撞
        setInterval(() => {
            //获取所有的div
            $('.div').each(function(index,item){
                if(mine_left>$(item).position().left-29 &&
                    mine_left<$(item).position().left+29 &&
                    mine_top>$(item).position().top-29 && 
                    mine_top<$(item).position().top+29){
                    $(item).remove()
                    $("#count").html(parseInt($("#count").html())+1)
                }
            })
        }, 30);


        //初始化方法
        let init = function(){
            mine = $('<div/>').addClass('mine')
            $("#box").append(mine)
            let maxWidth = $("#box").innerWidth()
            let maxHeight = $("#box").innerHeight()
            let width = mine.innerWidth()
            let height = mine.innerHeight()
            mine_left = (maxWidth-width)/2
            mine_top = (maxHeight-height)/2
            maxLeft = maxWidth-width
            maxTop = maxHeight-height
            mine.css({
                top:mine_top,
                left:mine_left
            })
        }

        init()
        

        //键盘事件
        $(document).keydown(function(e){
            //判断mine是否存在
            if(!mine) return

            if(e.keyCode===13){
                if(timer){
                    clearInterval(timer)
                    timer = null
                    clearInterval(timer2)
                    timer2 = null
                    clearInterval(timer3)
                    timer3 = null
                }else{
                    run()
                    creatediv ()
                }
            }else if(e.keyCode===38){
                //上
                position="top"
            }else if(e.keyCode===40){
                //下
                position="bottom"
            }else if(e.keyCode===37){
                //左
                position="left"
            }else if(e.keyCode===39){
                //右
                position="right"
            }else if(e.keyCode===32){
                timer_num = 50
                clearInterval(timer)
                run()
            }
        }).keyup(function(e){
            if(e.keyCode===32){
                timer_num = 200
                clearInterval(timer)
                run()
            }
        })

        let timer = null //定时器
        let timer_num = 200
        //运动方法
        function run(){
            timer = setInterval(() => {
                switch(position){
                    case 'top':
                        mine_top-=15
                        mine.css({
                            top:mine_top+"px"
                        })
                        break
                    case 'bottom':
                        mine_top+=15
                        mine.css({
                            top:mine_top+"px"
                        })
                        break
                    case 'left':
                        mine_left-=15
                        mine.css({
                            left:mine_left+"px"
                        })
                        break
                    case 'right':
                        mine_left+=15
                        mine.css({
                            left:mine_left+"px"
                        })
                        break
                }
                //判断是否碰墙
                if(mine_left<0 || mine_left>maxLeft || 
                    mine_top<0 || mine_top>maxTop){
                    clearInterval(timer)
                    clearInterval(timer2)
                    clearInterval(timer3) 
                    alert("Game Over~")
                    mine.remove()   //从页面中移除
                    mine=null       //清空对象
                }
            }, timer_num);
        }
    </script>
</body>
</html>